<template>
  <div id="search">
    <router-link to="/searchList"><span class="iconfont icon-icon-7" @click="search"></span></router-link>
    <input type="text" ref="songName" placeholder="请输入歌曲名称...">
  </div>
</template>

<script>
  export default {
    name: 'Search',
    methods: {
      search: function () {
        let val = this.$refs.songName.value
        this.$root.eventHub.$emit('search', val)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/scss/mixin";
  #search {
    width: 100%;
    height: pxTorem(40);
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: pxTorem(24);
      padding-left: pxTorem(10);
    }
    input {
      width: 90%;
      height: 100%;
    }
  }
</style>
